<template>
  <div class="notice-set">
    <!-- 头部 -->
    <div class="header-box">
      <div class="left-box">
        <div class="return-box" @click="$router.go(-1)">
          <sc-icon name="iconfanhui"></sc-icon>
          <span class="return">返回</span>
        </div>
        <span class="line">|</span>
        <span class="title">报警通知设置</span>
      </div>
      <div class="btn-box">
        <!-- <el-button @click="$router.go(-1)">取消</el-button>
        <el-button type="primary" @click="submitData">保存</el-button> -->
      </div>
    </div>
    <!--内容-->
    <div class="content-box">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="grade" label="报警等级">
          <template slot-scope="scope">
            <span>{{ levelList[scope.row.grade - 1] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="platform" label="平台推送">
          <template slot-scope="scope">
            <div :class="scope.row.platform ? 'circle' : 'grey circle'">
              <div class="inner"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="wechat" label="公众号">
          <template slot-scope="scope">
            <div :class="scope.row.wechat ? 'circle' : 'grey circle'">
              <div class="inner"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sms" label="短信">
          <template slot-scope="scope">
            <div :class="scope.row.sms ? 'circle' : 'grey circle'">
              <div class="inner"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮件">
          <template slot-scope="scope">
            <div :class="scope.row.email ? 'circle' : 'grey circle'">
              <div class="inner"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="重复（分钟）">
          <template slot-scope="scope">
            <span>{{ scope.row.repeatePush || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="重复次数">
          <template slot-scope="scope">
            <span>{{ scope.row.repeateTimes || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="操作">
          <template slot-scope="scope">
            <div class="btns">
              <span v-if="scope.row.canShow" class="btn" @click="showPerson(scope.row.grade)">查看接收人</span>
              <span v-if="scope.row.canShow" class="btn2" @click="modifyData(scope.row.grade)">修改</span>
              <span v-if="!scope.row.canShow" class="btn" @click="settingData(scope.row)">设置</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--对话框-->
    <el-dialog
      title="通知设置修改"
      :visible.sync="dialogNoticeVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      width="42%"
    >
      <div class="form-con">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="报警等级">
            <el-input class="form-item" :disabled="true" v-model="form.gradeTxt"></el-input>
          </el-form-item>
          <el-form-item label="重复推送">
            <div class="form-item">
              <el-input class="form-input" v-model="form.repeate_push"></el-input>
              <div class="unit">分钟</div>
            </div>
            <span class="tip-txt">当通知未确认，且超过时间仍未恢复，则重复推送通知</span>
          </el-form-item>
          <el-form-item label="重复次数">
            <div class="form-item">
              <el-input class="form-input" v-model="form.repeate_times"></el-input>
              <div class="unit">次</div>
            </div>
          </el-form-item>
          <el-form-item label="推送方式" prop="methodData">
            <el-checkbox-group v-model="form.methodData" @change="test">
              <el-checkbox label="平台推送">平台推送</el-checkbox>
              <el-checkbox label="短信">短信</el-checkbox>
              <el-checkbox label="公众号">公众号</el-checkbox>
              <el-checkbox label="邮箱">邮箱</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="质保期内接收人">
            <el-select class="form-item" v-model="form.indateList" multiple placeholder="请选择">
              <el-option
                v-for="(item, index) in personList"
                :key="'indate_' + index"
                :label="item.username"
                :value="item.user_id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="质保期外接收人">
            <el-select class="form-item" v-model="form.outdateList" multiple placeholder="请选择">
              <el-option
                v-for="(item, index) in personList"
                :key="'outdate_' + index"
                :label="item.username"
                :value="item.user_id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input class="form-item" type="textarea" :rows="4" v-model="form.tip"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogNoticeVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmData">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="接收人信息"
      :close-on-click-modal="false"
      :visible.sync="dialogPersonVisible"
      :modal-append-to-body="false"
      width="42%"
    >
      <el-radio-group v-model="personSwitch" @change="switchState">
        <el-radio-button :label="1">保内</el-radio-button>
        <el-radio-button :label="2">保外</el-radio-button>
      </el-radio-group>
      <el-table :data="personData" stripe class="form-table">
        <el-table-column prop="name" label="接收人姓名"> </el-table-column>
        <el-table-column prop="telephone" label="手机号码"> </el-table-column>
        <el-table-column prop="openId" label="公众号Openid"> </el-table-column>
        <el-table-column prop="email" label="邮箱地址"> </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPersonVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getNoticeRuleList,
  createAlarmNotice,
  modifyAlarmNotice,
  getPersonList,
  modifyNoticeSetting,
  getNoticeDetail
} from '../../../api/rule';
export default {
  data() {
    const validateMethod = (rule, value, callback) => {
      if (this.form.methodData.length > 0) {
        callback();
      } else {
        if ((value && value.length === 0) || !value) {
          callback(new Error('请勾选推送方式'));
        } else {
          callback();
        }
      }
    };
    return {
      tableData: [], // 列表数据
      page: 1, // 当前页码
      pageSize: 15, // 当前页大小
      levelList: ['一级', '二级', '三级', '四级', '五级', '保养'], // 报警等级
      dialogNoticeVisible: false, // form表单dialog
      dialogPersonVisible: false, // 联系人 dialog
      rules: {
        methodData: [{ validator: validateMethod, trigger: 'blur' }]
      }, // form表单验证
      form: { type: [], methodData: [] }, // 设置表单
      personList: [], // 联系人列表
      isModify: false, // 是否修改
      templateData: [
        // 报警设置模板数据
        {
          email: 0,
          grade: 1,
          platform: 0,
          repeate_push: 0,
          repeate_times: 0,
          sms: 0,
          tip: '',
          wechat: 0
        },
        {
          email: 0,
          grade: 2,
          platform: 0,
          repeate_push: 0,
          repeate_times: 0,
          sms: 0,
          tip: '',
          wechat: 0
        },
        {
          email: 0,
          grade: 3,
          platform: 0,
          repeate_push: 0,
          repeate_times: 0,
          sms: 0,
          tip: '',
          wechat: 0
        },
        {
          email: 0,
          grade: 4,
          platform: 0,
          repeate_push: 0,
          repeate_times: 0,
          sms: 0,
          tip: '',
          wechat: 0
        },
        {
          email: 0,
          grade: 5,
          platform: 0,
          repeate_push: 0,
          repeate_times: 0,
          sms: 0,
          tip: '',
          wechat: 0
        },
        {
          email: 0,
          grade: 6,
          platform: 0,
          repeate_push: 0,
          repeate_times: 0,
          sms: 0,
          tip: '',
          wechat: 0
        }
      ], // 模板数据
      personSwitch: 1,
      personData: [], // 联系人数据
      detailData: {} // 详情数据
    };
  },
  mounted() {
    this.getNoticeList();
    this.getPersonData();
  },
  methods: {
    test(res) {
      console.log('res', res);
      this.$forceUpdate();
    },
    // 获取报警通知列表
    getNoticeList() {
      getNoticeRuleList({ page: this.page, page_size: this.pageSize }).then(res => {
        const list = res.data;
        let temp = [];
        list.forEach(item => {
          const grade = item.grade;
          this.templateData[grade - 1] = item;
        });
        console.log(this.templateData);
        this.templateData.forEach(item => {
          let hasSet = false;
          const keys = Object.keys(item);
          keys.forEach(key => {
            if (key !== 'grade' && key !== 'repeatePush' && key !== 'repeateTimes') {
              if (item[key]) {
                item[key] = true;
                hasSet = true;
              } else {
                item[key] = false;
              }
            }
          });
          item.canShow = hasSet;
          temp.push(item);
        });
        console.log('ttt', temp);
        this.tableData = temp;
      });
    },
    // 获取接收人
    getPersonData() {
      getPersonList().then(res => {
        this.personList = res.data;
      });
    },
    // 提交数据
    submitData() {
      modifyNoticeSetting().then(res => {
        this.$message({
          type: 'success',
          message: '修改成功'
        });
      });
    },
    // 查看接收人
    showPerson(level) {
      getNoticeDetail({ grade: level }).then(res => {
        const detail = res.data;
        this.detailData = detail;
        if (this.personSwitch === 1) {
          this.personData = detail.indateCustomer;
        } else {
          this.personData = detail.outdateCustomer;
        }
        this.dialogPersonVisible = true;
      });
    },
    // 确认数据
    confirmData() {
      this.$refs.form.validate(res => {
        if (res) {
          this.form.platform = this.form.methodData.indexOf('平台推送') > -1 ? 1 : 0;
          this.form.sms = this.form.methodData.indexOf('短信') > -1 ? 1 : 0;
          this.form.wechat = this.form.methodData.indexOf('公众号') > -1 ? 1 : 0;
          this.form.email = this.form.methodData.indexOf('邮箱') > -1 ? 1 : 0;
          if (typeof this.form.repeate_push === 'string') this.form.repeate_push = parseInt(this.form.repeate_push);
          if (typeof this.form.repeate_times === 'string') this.form.repeate_times = parseInt(this.form.repeate_times);
          if (this.isModify) {
            modifyAlarmNotice(this.form).then(res => {
              this.$message({
                type: 'success',
                message: '操作成功'
              });
              this.getNoticeList();
              this.dialogNoticeVisible = false;
            });
          } else {
            createAlarmNotice(this.form).then(res => {
              this.$message({
                type: 'success',
                message: '操作成功'
              });
              this.getNoticeList();
              this.dialogNoticeVisible = false;
            });
          }
        }
      });
    },
    // 切换
    switchState(res) {
      if (res === 1) {
        this.personData = this.detailData.indateCustomer;
      } else {
        this.personData = this.detailData.outdateCustomer;
      }
    },
    // 修改
    modifyData(level) {
      getNoticeDetail({ grade: level }).then(res => {
        const detail = res.data;
        const temp = [];
        if (detail.email) temp.push('邮箱');
        if (detail.wechat) temp.push('公众号');
        if (detail.sms) temp.push('短信');
        if (detail.platform) temp.push('平台推送');
        const indateCustomer = detail.indateCustomer;
        const outdateCustomer = detail.outdateCustomer;
        detail.indateList = indateCustomer.map(item => item.id);
        detail.outdateList = outdateCustomer.map(item => item.id);
        detail.gradeTxt = this.levelList[detail.grade - 1];
        detail.repeate_push = detail.repeatePush;
        detail.repeate_times = detail.repeateTimes;
        detail.methodData = temp;
        this.$nextTick(res => {
          this.form = detail;
          console.log(this.form);
        });

        this.isModify = true;
        this.dialogNoticeVisible = true;
      });
    },
    // 设置
    settingData(row) {
      this.isModify = false;
      row.repeate_push = 0;
      row.repeate_times = 1;
      row.gradeTxt = this.levelList[row.grade - 1];
      row.tip = '';
      row.methodData = [];
      this.dialogNoticeVisible = true;
      this.$nextTick(res => {
        this.form = row;
        console.log('form', this.form);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.btns {
  display: flex;
  align-items: center;
  color: #3378ff;
  font-size: 14px;
  cursor: pointer;
  .btn2 {
    margin-left: 10px;
  }
}

.form-table {
  max-height: 327px;
  overflow: auto;
}

.form-con {
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
  .tip-txt {
    color: #909399;
    font-size: 12px;
  }
  .form-item {
    flex: 1;
    display: flex;
    .form-input {
      flex: 8;
    }
    .unit {
      flex: 1;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      text-align: center;
      background: #f5f7fa;
    }
  }
}

.circle {
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background-color: #3378ff;
  display: flex;
  align-items: center;
  justify-content: center;
  .inner {
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 10px;
  }
}
.grey {
  background-color: #eeeeee !important;
}

.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 0 20px;
  border-bottom: 1px solid #ebeef5;
  .left-box {
    display: flex;
    align-items: center;
    .return-box {
      cursor: pointer;
      .return {
        color: #303133;
        font-size: 14px;
        margin-left: 3px;
      }
    }
    .line {
      margin: 0 12px;
      color: #c0c4cc;
    }
    .title {
      font-size: 18px;
      color: #606266;
    }
  }
}
.content-box {
  padding: 20px;
}
</style>
